<template>
    <div class="store-panorama">
        <!--video-->
        <swiper :options="swiperOption">
            <swiper-slide>

                <div v-if="Object.keys(panoramaMedia).length > 0">
                    <div
                        class="no-data-wrap"
                        :noDataProps="{imgUrl:staticImageUrl('/images/look/no_comment_list1.png')}"
                        v-if="panoramaMedia.mediaContents.length == 0"
                    >
                        <no-data v-if="noData"></no-data>
                        <!-- <wx-share-body @wxShareCb="wxShareCb"></wx-share-body> -->
                    </div>
                    <div v-else>
                        <div v-if="panoramaMedia.mediaType == 0">
                            <full-height-video
                                ref="fullHeightVideo"
                                v-if="videoMsg.videoUrl"
                                :videoPropsMsg="videoMsg"
                                :isNotAutoplay="true"
                            >
                            </full-height-video>
                        </div>
                        <!--panoramaVideo-->
                        <!--<div v-if="panoramaMedia.mediaType == '0'">-->
                        <!--<video-panorama :videoPanoramaProps="dealVideoPanorama(panoramaMedia)"></video-panorama>-->
                        <!--</div>-->
                        <!--swiper-->
                        <div v-else-if="panoramaMedia.mediaType == 1">
                            <full-height-swiper
                                ref="fullHeightSwiper"
                                v-if="Object.keys(swiperMsg).length > 0"
                                @change-end-cb="nowIndex"
                                @touch-end-cb="nowIndex"
                                :FHSwiperMsg="swiperMsg"
                            ></full-height-swiper>
                        </div>
                        <!--panoramaMedia-->
                        <div v-else-if="panoramaMedia.mediaType == 2 && Object.keys(panoramaMsg).length > 0">
                            <full-pamprama :panoramaMsgProps="panoramaMsg"></full-pamprama>
                        </div>
                        <!--panoramaVideo-->
                        <div v-else-if="panoramaMedia.mediaType == 3">
                            <video-panorama
                                :videoPanoramaProps="dealVideoPanorama(panoramaMedia)"
                                :videoPanoramaMsgProps="{isCanTouch:true,poster:panoramaMedia.poster}"
                            ></video-panorama>
                        </div>
                        <!--<rt-share-collect-speak-->
                        <!--v-if="rtCommont && Object.keys(rtCommont).length > 0"-->
                        <!--@getUserMainComment="getUserMainComment"-->
                        <!--:commentListProps="commentListProps"-->
                        <!--@getSubCommentList="getSubCommentList"-->
                        <!--@doComment="doComment"-->
                        <!--@isLike="isLike"-->
                        <!--:rtCommontProps="rtCommont">-->
                        <!--</rt-share-collect-speak>-->
                        <user-handle-icons
                            ref="shareCollectSpeak"
                            v-if="rtCommont && Object.keys(rtCommont).length > 0"
                            :rtCommontProps="rtCommont"
                            :commentListProps="commentListProps"
                            :discountList="discountListProp"
                            @getUserMainComment="getUserMainComment"
                            @getSubCommentList="getSubCommentList"
                            @doComment="doComment"
                            @isLike="isLike"
                            @showShare="shareShow"
                        >
                        </user-handle-icons>
                        <wx-share-body @wxShareCb="wxShareCb"></wx-share-body>
                    </div>
                </div>
            </swiper-slide>
        </swiper>
    </div>
</template>
<script>
import FullHeightVideo from "../../components/commonActModel/video/FullHeightVideo";
import { mapMutations, mapState, mapGetters } from 'vuex';
export default {
    name: "panorama",
    props: {
        discountListProp: Array,
    },
    data () {
        return {
            commentListProps: { userHendleType: 'module5' },//侧边栏评论分享等
            PhotoSphereViewer: '',
            videoTimer: false,
            videoTime: 0,
            rtCommont: {},
            commentKey: 0,
            menuId: 0,
            menuType: 0,
            storeId: 0,
            noData: false,
            swiperOption: {
                direction: 'vertical',
            },
            panoramaMedia: {
                mediaType: 1,/*0:视频 , 1:图片,2:实景图*/
                poster: '',
                mediaContents: [
                    // {url:'',}
                ],
            },
            videoMsg: {
                videoUrl: '',
            },
            swiperMsg: {
                // imagesList:[]
            },
            panoramaMsg: {
                // url:''
            },
            /*https://oss.pg.yibaotong.top/video/promoter/2019071011_dev/CDF796315ABA4C06A95140794E3234CB.mp4*/
        }
    },
    mounted () {
        this.storeId = this.$route.query && this.$route.query.storeId ? this.$route.query.storeId : null;
        this.menuType = this.$route.query && this.$route.query.menuType ? this.$route.query.menuType : 0
        this.menuId = this.$route.query && this.$route.query.menuId ? this.$route.query.menuId : 0;
        let tempObj = {
            storeId: this.storeId,
            menuType: this.menuType,
            menuId: this.menuId,
        }
        this.updateStoreMenu(tempObj);
        this.init();
    },
    methods: {
        ...mapMutations(['medioApi', 'updateStoreMenu', 'isLike', 'shareShow']),
        videoAutoPlay () {
            let that = this;
            if (that.panoramaMedia && that.panoramaMedia.mediaType == 0) {
                that.videoTimer = setTimeout(() => {
                    that.videoTime++;
                    if ($('video').length > 0 && that.$refs && that.$refs.fullHeightVideo) {
                        that.$refs.fullHeightVideo.playVideo();
                        clearTimeout(that.videoTimer);
                    } else if (that.videoTime <= 50) {
                        that.videoAutoPlay();
                    } else if (that.videoTime > 50) {
                        clearTimeout(that.videoTimer);
                    }
                }, 100)
            }
        },
        init () {
            let that = this;
            /*commentType 0:多媒体信息 1：店铺实景内容 2：店铺活动 3：店铺商品 4： 商家主页品牌*/
            this.shareType = 1;//----分享类型：1：店铺官网媒体，2：店铺活动 3：店铺商品 4： 买家秀 5：大师
            let shareId = 1; //----对应分享类型需要传的ID： 1： 媒体ID 2： 活动id 3:商品id 4:买家秀ID 5: 大师ID
            let queryUserId = '';
            let query = {
                storeId: that.storeId,
                menuId: this.menuId,
                queryUserId: this.userId || this.thirdId,
                successFn
            }
            this.noData = false;
            this.medioApi(query);
            function successFn (data) {
                if (!data.result) {
                    return
                }
                setTimeout(() => {
                    that.noData = true;
                }, 500)
                that.commentKey = data.result.id;
                that.$store.commit('getmediaId', that.commentKey);
                let tempObj = {
                    mediaContents: data.result.mediaContents,
                    mediaType: data.result.mediaType,
                    poster: data.result.poster,
                };
                let iconsShow = {
                    "isNeedServer": true,
                    "isNeedContentShare": false,
                    "paginationType": 2,
                    likeType: 1,
                }
                that.panoramaMsg = Object.assign({}, that.panoramaMsg, tempObj);
                that.panoramaMedia = Object.assign({}, that.panoramaMedia, that.panoramaMsg);
                that.rtCommont = Object.assign({}, that.rtCommont, data.result, iconsShow);
                setTimeout(() => {
                    that.panoramaMediaFn();
                }, 50)
            }
            setTimeout(() => {
                that.noData = true;
            }, 500)
        },
        panoramaMediaFn () {
            let that = this;
            if (this.panoramaMedia.mediaType == 0 && this.panoramaMedia.mediaContents.length > 0 && this.panoramaMedia.mediaContents[0].url) {
                this.videoMsg.videoUrl = this.panoramaMedia.mediaContents[0].url || '';
                this.videoMsg.poster = this.panoramaMedia.poster || '';
            } else if (this.panoramaMedia.mediaType == 1) {
                let tempList = [];
                for (let value in that.panoramaMedia.mediaContents) {
                    tempList.push(that.panoramaMedia.mediaContents[value].url);
                }
                let tempObj = {
                    imagesList: tempList
                };

                that.swiperMsg = Object.assign({}, that.swiperMsg, tempObj);
            } else if (this.panoramaMedia.mediaType == 2) {
                // this.PhotoSphereViewer = require('../../../static/js/panorama');
                // this.loadPredefinedPanorama();
                /*暂时不考虑多张panarama的情况*/
                let tempObj = {
                    url: that.panoramaMedia.mediaContents[0].url || ''
                };
                that.panoramaMsg = Object.assign({}, that.panoramaMsg, tempObj);
            }
            if (this.isIphone) {
                this.videoAutoPlay();
            }
        },
        nowIndex (index) {
            let tempObject = this.rtCommont
            tempObject.nowSwiperIndex = index;
            this.rtCommont = Object.assign({}, this.rtCommont, tempObject);
        },
        getUserMainComment (obj) {
            this.$emit('getUserMainComment', obj)
        },
        // isLike(obj){
        //     this.$emit("isLike",obj);
        // },
        getSubCommentList (obj) {
            this.$emit("getSubCommentList", obj);
        },
        /*分享成功的回调*/
        wxShareCb (params) {
            console.log('shareparams', params);
            if (this.$refs.shareCollectSpeak && this.$refs.shareCollectSpeak.showShareFn) {
                this.$refs.shareCollectSpeak.showShareFn(false);
            }
            if (!params) {
                return
            }
            this.rtCommont.dataInfo.shareNum += 1;
            this.rtCommont = Object.assign({}, this.rtCommont)
        },
        doComment (obj) {
            this.$emit("doComment", obj)
        },
        dealVideoPanorama (obj) {
            let videoPano = {
                scenesArr: [{
                    sceneFilePath: obj.mediaContents[0].url,
                }],
            };

            return videoPano;
        },
        loadPredefinedPanorama () {
            let that = this;
            var loader = document.createElement('div');
            loader.className = 'loader';
            var div = document.getElementById('container');
            div.style.height = '30px';
            let urlName = this.$route.query.img || (that.panoramaMedia.mediaContents[0] && that.panoramaMedia.mediaContents[0].url);
            var PSV = new that.PhotoSphereViewer.PhotoSphereViewer({
                // panorama: 'http://192.168.1.163:7180/static/img/1.e28dfd3.jpg',
                panorama: urlName,
                container: div,
                time_anim: false,
                navbar: true,
                size: {
                    width: '100vw',
                    height: '100vh'
                },
                loading_html: loader,
                smooth_user_moves: false
            });
        }
    },
    watch: {
        panoramaMediaProps (val) {
            if (val && val.mediaContents[0]) {
                this.panoramaMedia = Object.assign({}, this.panoramaMedia, val);
                setTimeout(() => {
                    this.panoramaMediaFn();
                }, 50)
            }
        },
        rtCommontProps (val) {
            if (val && val.mediaContents[0]) {
                this.rtCommont = Object.assign({}, this.rtCommont, val);
            }
        },
    },
    components: {
        // 'rt-share-collect-speak':()=>import('../../components/commonActModel/userHandleIcons/RtShareCollectSpeak'),
        'user-handle-icons': () => import('../../components/commonActModel/userHandleIcons/UserHandleIcons'),
        "full-height-video": FullHeightVideo,
        "full-height-swiper": () => import("../../components/commonComponents/swiperComponent/FullHeightSwiper"),
        "full-pamprama": () => import("../../components/commonComponents/panorama/pic/Panorama"),
        "no-data": () => import("../../components/commonActModel/noData/NoData"),
        'wx-share-body': () => import('../../components/wx/WxShareBody'),
        'video-panorama': () => import("../../components/commonComponents/panorama/video/VideoPanorama"),
    }
}
</script>

<style scoped lang="scss">
.no-data-wrap {
    position: relative;
    height: 100vh;
    z-index: 1;
}
.store-panorama > .no-data-wrap /deep/ .no-wcomment {
    z-index: 1;
    background-image: -webkit-linear-gradient(
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0) 100%
    );
    background-image: linear-gradient(
        rgba(0, 0, 0, 0.3) 0%,
        rgba(0, 0, 0, 0) 20%,
        rgba(0, 0, 0, 0) 100%
    );
}
.store-panorama {
    overflow: hidden;
}
</style>